import '../assets/style/common.less'
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

const scene = new THREE.Scene();
scene.background = new THREE.Color('#163038')
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(1, 5, 10);
camera.lookAt(0, 0, 0);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 轨道控制器
const controls = new OrbitControls( camera, renderer.domElement );
// 坐标轴
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

// 几何
const plane = new THREE.PlaneGeometry(20, 20)

const baseMaterial = new THREE.MeshStandardMaterial({
  color: new THREE.Color('#66ccff'),
  side: THREE.DoubleSide
})

const mesh = new THREE.Mesh(plane, baseMaterial)
mesh.position.set(0,0,0)
mesh.rotateX(Math.PI / 2)
scene.add(mesh)

// 环境光
const ambientLight = new THREE.AmbientLight('#ffffff')
scene.add(ambientLight)

function animate() {
  requestAnimationFrame(animate);
  controls.update()
  renderer.render(scene, camera);
}
animate()

window.addEventListener('resize', () => {
  const width = window.innerWidth;
  const height = window.innerHeight;
  renderer.setSize(width, height);
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
});